<template>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          <i class="fa fa-money"></i> 余额查询
        </div>
        <div class="layui-card-body">
          <form class="layui-form" action>
            <div class="layui-form-item">
              <div class="layui-input-block" style="margin-left:0px !important;">
                <input
                  type="text"
                  v-model="accountId"
                  maxlength="18"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入查询账户"
                  class="layui-input"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  style="display: inline-block;    width: 30%;"
                >
                <a
                  id="modal-144491"
                  href="#modal-container-144491"
                  role="button"
                  class="btn btn-primary"
                  data-toggle="modal"
                >查询</a>
                <div class="col-md-12 column">
                  <div
                    class="modal fade"
                    id="modal-container-144491"
                    role="dialog"
                    aria-labelledby="myModalLabel"
                    aria-hidden="true"
                  >
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-hidden="true"
                          >×</button>
                          <h4 class="modal-title" id="myModalLabel">请输入该{{accountId}}账户的账户密码</h4>
                        </div>
                        <div class="modal-body">
                          <div class="layui-form-item">
                            <label class="layui-form-label my_label">账户密码</label>
                            <div class="password-div">
                              <label for="password" class="password-lable">
                                <ul>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                </ul>
                                <input
                                  id="password"
                                  v-model="password"
                                  type="password"
                                  name="password"
                                  maxlength="6"
                                >
                              </label>
                            </div>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button
                            class="btn btn-primary"
                            @click.prevent="queryBalance"
                            data-dismiss="modal"
                          >确认</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <button
                  class="layui-btn layui-btn-disabled"
                  v-bind:class="balanceExist ? 'balanceClass':'nobanlanceClass'"
                >当前余额{{currentBalance}}￥</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">
          <i class="fa fa-mail-forward"></i> 存款
        </div>
        <div class="layui-card-body">
          <form class="layui-form" action>
            <div class="layui-form-item">
              <label class="layui-form-label my_label">存款账户</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model="saveAccount"
                  maxlength="18"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入存款账户"
                  class="layui-input"
                  oninput="value=value.replace(/[^\d]/g,'')"
                >
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label my_label">账户名</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model="saveAccountName"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入存款账户名"
                  class="layui-input"
                >
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label my_label">存款金额</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model="saveAccountBalance"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入存款金额"
                  class="layui-input"
                  oninput="value=value.replace(/[^\d]/g,'')"
                >
              </div>
            </div>

            <a
              id="modal-144492"
              href="#modal-container-144492"
              role="button"
              class="btn btn-primary"
              data-toggle="modal"
              style="width:100%;"
            >存款</a>
            <div class="col-md-12 column">
              <div
                class="modal fade"
                id="modal-container-144492"
                role="dialog"
                aria-labelledby="myModalLabel"
                aria-hidden="true"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <h4 class="modal-title" id="myModalLabel">请输入存款账户的账户密码</h4>
                    </div>
                    <div class="modal-body">
                      <div class="layui-form-item">
                        <label class="layui-form-label my_label">账户密码</label>
                        <div class="password-div1">
                          <label for="password" class="password-lable">
                            <ul>
                              <li></li>
                              <li></li>
                              <li></li>
                              <li></li>
                              <li></li>
                              <li></li>
                            </ul>
                            <input
                              id="password1"
                              v-model="savePassword"
                              type="password"
                              name="password1"
                              maxlength="6"
                            >
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button
                        class="btn btn-primary"
                        @click.prevent="saveBalanceByAccountId"
                        data-dismiss="modal"
                      >确认</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">
          <i class="fa fa-mail-reply"></i> 取款
        </div>
        <div class="layui-card-body">
          <form class="layui-form" action>
            <div class="layui-form-item">
              <label class="layui-form-label my_label">取款账户</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model="getAccount"
                  maxlength="18"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入取款账户"
                  class="layui-input"
                  oninput="value=value.replace(/[^\d]/g,'')"
                >
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label my_label">账户名</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model="getAccountName"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入取款账户名"
                  class="layui-input"
                >
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label my_label">取款金额</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model="getAccountBalance"
                  lay-verify="title"
                  autocomplete="off"
                  placeholder="请输入取款金额"
                  class="layui-input"
                  oninput="value=value.replace(/[^\d]/g,'')"
                >
              </div>
            </div>

            <a
              id="modal-144493"
              href="#modal-container-144493"
              role="button"
              class="btn btn-primary"
              data-toggle="modal"
              style="width:100%;"
            >取款</a>
            <div class="col-md-12 column">
              <div
                class="modal fade"
                id="modal-container-144493"
                role="dialog"
                aria-labelledby="myModalLabel"
                aria-hidden="true"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <h4 class="modal-title" id="myModalLabel">请输入取款账户的账户密码</h4>
                    </div>
                    <div class="modal-body">
                      <div class="layui-form-item">
                        <label class="layui-form-label my_label">账户密码</label>
                        <div class="password-div2">
                          <label for="password" class="password-lable">
                            <ul>
                              <li class="getBalanceClass"></li>
                              <li class="getBalanceClass"></li>
                              <li class="getBalanceClass"></li>
                              <li class="getBalanceClass"></li>
                              <li class="getBalanceClass"></li>
                              <li class="getBalanceClass"></li>
                            </ul>
                            <input
                              id="password2"
                              v-model="getPassword"
                              type="password"
                              name="password2"
                              maxlength="6"
                            >
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button
                        class="btn btn-primary"
                        @click.prevent="getBalanceByAccountId"
                        data-dismiss="modal"
                      >确认</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Qs from "qs";
export default {
  data() {
    return {
      balanceExist: false, //余额显示
      accountId: "", //余额
      password: "", //账户密码
      currentBalance: "", //当前余额

      saveAccount: "", //存款账户
      saveAccountName: "", //存款账户名
      saveAccountBalance: "", //存款金额
      savePassword: "", //存款密码

      getAccount: "", //取款账户
      getAccountName: "", //取款账户名
      getAccountBalance: "", //取款金额
      getPassword: "" //取款密码
    };
  },
  mounted: function() {
    this.passwordShow(); //密码框的显示
  },
  methods: {
    passwordShow: function() {
      //密码框显示
      //查询密码框的显示
      $(".password-div input").on("input", function(e) {
        //标签为password-div下的input添加oninput事件
        var number = 6; //定义输入最大值
        var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
        var list = $(".password-div ul li"); //定义list是li
        for (var i = 0; i < number; i++) {
          //for循环遍历将·放入li标签
          if (pw[i]) {
            $(list[i]).text("·");
          } else {
            $(list[i]).text("");
          }
        }
      });
      $(".password-div ul").click(function() {
        $("input[name = 'password']").val("");
        $("#password").focus();
        $(".password-div ul li").text("");
      });
      //存款密码框
      $(".password-div1 input").on("input", function(e) {
        //标签为password-div下的input添加oninput事件
        var number = 6; //定义输入最大值
        var pw = $("input[name = 'password1']").val(); //定义pw为name是password的input框的输入值
        var list = $(".password-div1 ul li"); //定义list是li
        for (var i = 0; i < number; i++) {
          //for循环遍历将·放入li标签
          if (pw[i]) {
            $(list[i]).text("·");
          } else {
            $(list[i]).text("");
          }
        }
      });
      $(".password-div1 ul").click(function() {
        $("input[name = 'password1']").val("");
        $("#password1").focus();
        $(".password-div1 ul li").text("");
      });
      //取款密码框
      $(".password-div2 input").on("input", function(e) {
        //标签为password-div下的input添加oninput事件
        var number = 6; //定义输入最大值
        var pw = $("input[name = 'password2']").val(); //定义pw为name是password的input框的输入值
        var list = $(".password-div2 ul li"); //定义list是li
        for (var i = 0; i < number; i++) {
          //for循环遍历将·放入li标签
          if (pw[i]) {
            $(list[i]).text(".");
          } else {
            $(list[i]).text("");
          }
        }
      });
      $(".password-div2 ul").click(function() {
        $("input[name = 'password2']").val("");
        $("#password2").focus();
        $(".password-div2 ul li").text("");
      });
    },
    queryBalance: function() {
      //查询账户余额
      var AccountRegix = /^[\d]{18}$/; //账户
      var passwordRegix = /^[\d]{6}$/; //密码
      var data = Qs.stringify({
        accountId: this.accountId,
        cardPassword: this.password
      });
      if (
        this.accountId.match(AccountRegix) &&
        this.password.match(passwordRegix)
      ) {
        this.$axios
          .post("/bk-user/queryAccountBalance", data, {
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          })
          .then(result => {
            if (result.data.code === 200) {
              this.currentBalance = result.data.data[0].balance;
              this.balanceExist = true;
            } else if (result.data.code === 400) {
              this.$message.error(result.data.message);
              this.balanceExist = false;
            }
          })
          .catch(failResponse => {});
      } else if (!this.accountId.match(AccountRegix)) {
        this.$message.error("账户必须18位");
        return false;
      } else if (!this.password.match(passwordRegix)) {
        this.$message.error("密码必须为数字且不能为空");
        return false;
      }
      /*清空输入密码框 */
      this.password = "";
      $(".password-div ul li").text("");
    },
    saveBalanceByAccountId: function() {
      //存款
      var AccountRegix = /^[\d]{18}$/; //账户
      var passwordRegix = /^[\d]{6}$/; //密码
      if (!this.saveAccount.match(AccountRegix)) {
        this.$message.error("账户必须18位");
        return false;
      } else if (this.saveAccountBalance < 0) {
        this.$message.error("存款金额不能小于零");
        return false;
      } else if (this.saveAccountName === "") {
        this.$message.error("存款账户名不能为空");
        return false;
      } else if (!this.savePassword.match(passwordRegix)) {
        this.$message.error("密码必须为6位且不能为空");
        return false;
      } else {
        var data = Qs.stringify({
          cardId: this.saveAccount,
          uname: this.saveAccountName,
          balance: this.saveAccountBalance,
          cardPassword: this.savePassword
        });
        this.$axios
          .post(
            "/bk-user/saveOrGetBalanceByAccountId/1", //1为存钱
            data,
            { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
          )
          .then(result => {
            if (result.data.code === 200) {
              this.currentBalance = result.data.data[0].balance;
              this.balanceExist = true;
              this.$message.error(result.data.message);
              this.saveAccount = "";
              this.saveAccountName = "";
              this.saveAccountBalance = "";
              this.savePassword = "";
            } else if (result.data.code === 400) {
              this.$message.error(result.data.message);
              this.balanceExist = false;
            }
          })
          .catch(failResponse => {});
      }
      /*清空输入密码框 */
      this.savePassword = "";
      $(".password-div1 ul li").text("");
    },
    getBalanceByAccountId: function() {
      //取款
      var AccountRegix = /^[\d]{18}$/; //账户
      var passwordRegix = /^[\d]{6}$/; //密码
      if (!this.getAccount.match(AccountRegix)) {
        this.$message.error("账户必须要18位");
        return false;
      } else if (this.getAccountBalance < 0) {
        this.$message.error("取款金额不能小于零");
        return false;
      } else if (this.getAccountName === "") {
        this.$message.error("取款账户名不能为空");
        return false;
      } else if (!this.getPassword.match(passwordRegix)) {
        this.$message.error("密码必须为6位且不能为空");
        return false;
      } else {
        var data = Qs.stringify({
          cardId: this.getAccount,
          uname: this.getAccountName,
          balance: this.getAccountBalance,
          cardPassword: this.getPassword
        });
        this.$axios
          .post(
            "/bk-user/saveOrGetBalanceByAccountId/0", //0为取钱
            data,
            { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
          )
          .then(result => {
            if (result.data.code === 200) {
              this.currentBalance = result.data.data[0].balance;
              this.balanceExist = true;
              this.getAccount = "";
              this.getAccountName = "";
              this.getAccountBalance = "";
              this.getPassword = "";
              this.$message.error(result.data.message);
            } else if (result.data.code === 400) {
              this.$message.error(result.data.message);
              this.balanceExist = false;
            }
          })
          .catch(failResponse => {});
      }
      /*清空输入密码框 */
      this.getPassword = "";
      $(".password-div2 ul li").text("");
    }
  }
};
</script>
<style>
.my_label {
  width: 110px;
}
.nobanlanceClass {
  /*余额不显示*/
  display: none;
}
.balanceClass {
  /*余额显示*/
  display: inline-block;
}
/*支付密码框*/
ul,
li {
  list-style: none;
}
.password-div input,
.password-div1 input,
.password-div2 input {
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
}
.password-lable {
  height: 30px;
  clear: both;
}
.password-lable li {
  float: left;
  width: 33px;
  height: 38px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #dedede;
  margin-left: -1px;
  font-size: 33px;
}
/*支付密码框*/
.getBalanceClass {
  line-height: 0px !important;
  font-size: 60px !important;
  padding-left: 7px !important;
}
</style>
